<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<link href="css/logo.css" rel="stylesheet" type="text/css">
	<style>
		a:link,a:visited{
			color:#000000;
		}
		a:hover,a:active{
			color: #71A5B5;
		}
		* {
			margin:0;
			padding:0;
		}
		html,body {
			background:#081d4d;
		}
		#vas {
			position:absolute;
			vertical-align:top;
			z-index:1000; 
			pointer-events:none;
		}
	</style>
	<script>
		function checkname(){
			var name=document.getElementById("username");
			var span=document.getElementById("span_name");
			if(name.value.length==0){
				span.innerHTML="<font color='red' size='1'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请输入用户名</font>";
				return false;
			}else{
				span.innerHTML="";
				return true;
			}
		}
		function checkpass(){
			var pass=document.getElementById("password");
			var span=document.getElementById("span_pass");
			if(pass.value.length==0){
				span.innerHTML="<font color='red' size='1'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请输入密码</font>";
				return false;
			}else{
				span.innerHTML="";
				return true;
			}
		}
		function xiaoyan(){
			var flag=checkname()&&checkpass();
			return flag;
	}
	</script>
</head>

<body>
<!--	登录部分-->
<div style="z-index: 999;margin-left: 120px;">
	<form action="index.html" onSubmit="return xiaoyan()">
			<div style="border: 2px solid #8B8B8B;width: 400px;height: 344px;margin:120px 400px;position: absolute">
				<div style="text-align: center">
					<br/><h2><font color="#B80C0F">账户登录</font></h2><br/>
				</div>
				<div style="margin-left: 50px;border: 2px solid #E5E5E5;height: 40px;width: 300px">
					<img src="image/username.png" width="40px" height="40px" style="float: left;">
					<input type="text" style="width:256px;height: 36px;float: left;border: 1px solid #E5E5E5" id="username" placeholder="请输入用户名" onblur="checkname()" onkeyup="checkname()">
				</div>
					<span id="span_name"></span>
				<br/>
				<div style="margin-left: 50px;border: 2px solid #E5E5E5;height: 40px;width: 300px">
					<img src="image/password.png" width="40px" height="40px" style="float: left;">
					<input type="text" style="width:256px;height: 36px;float: left;border: 1px solid #E5E5E5" id="password" placeholder="请输入密码"  onBlur="checkpass()" onKeyUp="checkpass()">
				</div>
					<span id="span_pass"></span>
				<br/><br/>
				<div style="width: 300px;height: 40px">
					<input type="submit" value="登&nbsp;&nbsp;&nbsp;&nbsp;录" style="width:300px;height: 40px;margin-left: 50px;background-color:#B80C0F;font-weight: bold;color: aliceblue;font-size: +2;border: 1px solid #E5E5E5">
				</div>
				<br/><br/>
				<div style="background-color: #E3E3E3;width:100%;height: 40px;">
					<div style="position: absolute;margin-left: 310px;margin-top: 10px">
						<a href="注册.html" style="text-decoration-line: none;"><font color="#FE090D" size="-1" weight="200">&gt;&gt;&gt;立即注册</font></a>
						
					</div>
				</div>
			</div>	
		</form>
</div>

<canvas id="vas"></canvas>


<script>
  (function() {
      var can = document.getElementById("vas");
      var widths = document.documentElement.clientWidth || document.body.clientWidth;
      var heights = document.documentElement.clientHeight || document.body.clientHeight;
      can.width = widths;
      can.height = heights;
      var conm = 1000;
      var ctx = can.getContext("2d");
      ctx.fillStyle = "#fff";
      var Snowflake = function() {
          this.x = 0;
          this.y = 0;
          this.vy = 0;
          this.vx = 0;
          this.r = 0;
          this.reset();
      };
      Snowflake.prototype.reset = function() {
          this.x = Math.random() * widths;
          this.y = Math.random() * -heights;
          this.vy = 1 + Math.random() * 3;
          this.vx = 0.5 - Math.random();
          this.r = 1 + Math.random() * 2;
          this.o = 0.5 + Math.random() * 0.5;
      };
      var snowflakes = [],
          snowflake;
      for (i = 0; i < conm; i++) {
          snowflake = new Snowflake();
          snowflakes.push(snowflake);
      }
      setInterval(function() {
          ctx.clearRect(0, 0, widths, heights);
          for (i = 0; i < conm; i++) {
              snowflake = snowflakes[i];
              snowflake.y += snowflake.vy;
              snowflake.x += snowflake.vx;
              ctx.globalAlpha = snowflake.o;
              ctx.beginPath();
              ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2);
              ctx.closePath();
              ctx.fill();
              if (snowflake.y > heights) {
                  snowflake.reset();
              }
          }
      }, 15);
  }());
</script>
</body>
</html>
